import {
  BankOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, Card, Col,  Row,  Select, Space} from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
import React, { useEffect, useState } from 'react';
import Head from "../Head/Head";

import DrawBarGraph from './Graph_School/BarGraph.js';
import DrawRoseGraph from './Graph_School/RoseGraph.js';
import DrawChinaMap from './Graph_School/ChinaGraph1.js';
import SchoolSelector from './Graph_School/Selector_School';
import YearSelector from './Graph_School/Selector_Year';

const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem('浙江大学','1', <BankOutlined />,[
    getItem('2019', '2'),
    getItem('2020', '3'),
    getItem('2021', '4'),
  ]),
  getItem('清华大学','5', <BankOutlined />,[
    getItem('2019', '6'),
    getItem('2020', '7'),
    getItem('2021', '8'),
  ]), getItem('北京大学','9',<BankOutlined />,[
    getItem('2019', '10'),
    getItem('2020', '11'),
    getItem('2021', '12'),
  ]), getItem('复旦大学','13', <BankOutlined />,[
    getItem('2019', '14'),
    getItem('2020', '15'),
    getItem('2021', '16'),
  ]), getItem('上海交通大学','17', <BankOutlined />,[
    getItem('2019', '18'),
    getItem('2020', '19'),
    getItem('2021', '20'),
  ]), getItem('南京大学','21', <BankOutlined />,[
    getItem('2019', '22'),
    getItem('2020', '23'),
    getItem('2021', '24'),
  ]), getItem('中国科学技术大学','25', <BankOutlined />,[
    getItem('2019', '26'),
    getItem('2020', '27'),
    getItem('2021', '28'),
  ]), getItem('哈尔滨工业大学','29', <BankOutlined />,[
    getItem('2019', '30'),
    getItem('2020', '31'),
    getItem('2021', '32'),
  ]), getItem('西安交通大学','33', <BankOutlined />,[
    getItem('2019', '34'),
    getItem('2020', '35'),
    getItem('2021', '36'),
  ]),
];
var SelectedItem=[];
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [ItemCount, setItemCount] = useState(0);    //用户点击过侧边栏的次数作为状态
  const [SelectorCount, setSelectorCount] = useState(0);    //用户点击过选择栏的次数作为状态
  const [MapSchool, setMapSchool] = useState('浙江大学');
  const [MapYear, setMapYear] = useState('2019');
  useEffect(()=>{
    SelectedItem = [];
    setMapSchool('浙江大学');
    setMapYear('2019');
    setItemCount(0);
    setSelectorCount(0);
  },[]);
  const onClickMenu = (e) => {
    SelectedItem.push(e.key);
    if(SelectedItem.length > 6)
    {
        SelectedItem.shift();      
    }
    setItemCount(ItemCount+1);
//   for(var i=0;i<SelectedItem.length;i++)
//   {
//     console.log(SelectedItem[i]);
//   }
  };
 const onDeselectMenu=(e)=>{
  for(var i=0;i<SelectedItem.length;i++)
  {
    if(SelectedItem[i]===e.key)
    {
      SelectedItem.splice(i,1);
      setItemCount(ItemCount+1);
      break;
    }
    setItemCount(ItemCount+1);
  }
 }

var RenderChinaGraph = () => {
    return <DrawChinaMap School = {MapSchool} Year = {MapYear} Count = {SelectorCount}></DrawChinaMap> 
}

var RenderRoseGraph = () => {
    return<DrawRoseGraph List = {SelectedItem} Count = {ItemCount}></DrawRoseGraph>;
}
var RenderBarGraph = () => {
    return<DrawBarGraph List = {SelectedItem} Count = {ItemCount}></DrawBarGraph>;
}

  return (
    <React.Fragment>
      <Head keyValue='1'></Head>
      <div>
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo" />
        <Menu inlineIndent="30" theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items}multiple="true"  onSelect={onClickMenu} onDeselect={onDeselectMenu}></Menu>
      </Sider>
      <Layout className="site-layout">
        <Breadcrumb
            style={{
              margin: '16px 5px',
            }}
          >
             <Breadcrumb.Item>就业与行业信息地图</Breadcrumb.Item>
            <Breadcrumb.Item>学校毕业生就业流向</Breadcrumb.Item>
          </Breadcrumb>
        <Content
          style={{
            margin: '0 16px',
          }}
        >
         <Layout
              
              > 
              <Sider className="site-layout-background"
                style={{
                  padding: 30,
                  minHeight: 680,
                }} width={1000}>
                <Space direction="horizontal" size={12} style={{ paddingLeft: 9, paddingTop: 9 }}>
                    <SchoolSelector DefaultText={"浙江大学"} setSchool = {setMapSchool} Count = {SelectorCount} setCount = {setSelectorCount}/>
                    <YearSelector DefaultText={"2019"} setYear = {setMapYear} Count = {SelectorCount} setCount = {setSelectorCount}/>
                </Space>
                {RenderChinaGraph()}
                </Sider>
                <Layout>
                  <Header className="site-layout-background"  style={{
                    paddingTop:9,
                    paddingLeft:9,
                  minHeight: 420,
                  marginLeft:9,
                  left:0
                }}width={680}>

                    {RenderRoseGraph()}
                </Header>
                <Content  className="site-layout-background1"  style={{
                  minHeight: 250,
                  marginLeft:9
                }}width={680}>
                    {RenderBarGraph()}
                </Content>
                </Layout>
              </Layout>

        </Content>
      </Layout>
    </Layout>
    </div>
    </React.Fragment>
  );
};
export default App;